<template>
  <!-- 主页 -->
  <div id="snap-svg" v-visibility-change="change" style="padding: 0; margin: 0; height: 100vh; width: 100%; overflow: hidden">
    <div style="position: absolute">
      <el-button @click="MESOnline">MES当前 {{ MESIsonline ? "在线" : "离线" }}</el-button>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <template v-if="dialogOption < 2">
        <el-button size="mini" type="success" @click="operateRun(dialogTitle)">运行</el-button>
        <el-button size="mini" type="primary" @click="operateStop(dialogTitle)">停止</el-button>
        <el-button size="mini" type="danger" @click="operateRelieve(dialogTitle)">解除异常</el-button>
        <el-button size="mini" type="info" @click="operateDetails(dialogTitle)">详情</el-button>
        <el-button v-if="errorCode > 0 && errorCode < 3" size="mini" type="danger" @click="operateEmpty(dialogTitle)">处理空取</el-button>
        <el-button v-if="errorCode > 2" size="mini" type="danger" @click="operateDouble(dialogTitle)">处理二重</el-button>
        <el-button size="mini" type="danger" v-show="disableClickShow" @click="disableClick">禁用</el-button>
        <el-button v-if="abnormal" size="mini" type="danger">查看异常</el-button>
      </template>
      <template v-if="dialogOption === 2">
        <el-button size="mini" type="primary" @click="isBoundClick">出库模式</el-button>
        <el-button size="mini" type="primary" @click="isBoundClick">入库模式</el-button>
        <h4 v-for="(item,key) in IOPortData" :key="item.name">{{ key }} ： {{ item }}</h4>
      </template>
      <div v-if="particularsclick" style="margin-top: 20px">
        <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
          <span style="width: 150px; display: inline-block">{{ key }}</span> :
          <span style="margin-left: 30px; width: 100px; display: inline-block">{{ item }}</span>
        </p>
      </div>
    </el-dialog>
    <svg id="svg" />
    <map-container />
  </div>
</template>

<script>
const signalR = require("@microsoft/signalr");
import { InitSvg, HandleSingalRData, getsingalRData } from "./SvgLayout.js";
import {
  GetDeviceDataApi,
  HandleDeviceOperate,
  UpdateConfigValueApi,
  QueryConfigValue,
} from "@/api/dashboard";
import { updateSubDateApi } from "@/api/task.js";
import { Message } from "element-ui";
export default {
  name: "Dashboard",
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      isActive: true,
      /** 是否显示空取 或者二重按钮 */
      errorCode: 0,
      dialogOption: 0, // 0：输送机，1：堆垛机，2：灯
      /** 是否点击了详情 */
      particularsclick: false,
      /** 详情数据 */
      particularsData: {
        name: "",
        obj: "",
      },
      // MES是否在线
      MESIsonline: true,
      // 点击的灯的数据
      IOPortData: "",
      //禁用按钮
      disableClickShow: false,
      //设备是否异常
      abnormal:false
    };
  },
  mounted() {
    InitSvg(this);
    setTimeout(() => {
      this.bindSingalRData();
    }, 500);
  },
  beforeDestroy() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
  },
  activated() {
    this.bindSingalRData();
    this.isActive = true;
    console.log("activated");
  },
  deactivated() {
    this.$signalR.off("WcsMoniorData");
    this.$signalR.offPush("PushModeStatus");
    this.isActive = false;
    console.log("deactivated");
  },
  methods: {
    /** 标签切换事件(v-visibility-change="change") */
    change(evt, hidden) {
      // hidden：false切换回当前页面，true切换到别的页面
      console.log(hidden, this.isActive);
      if (hidden) {
        this.$signalR.off("WcsMoniorData");
        this.$signalR.offPush("PushModeStatus");
      } else {
        if (this.isActive) {
          this.bindSingalRData();
        }
      }
    },
    /** 绑定后端SingalR数据 */
    bindSingalRData() {
      this.$signalR.on("WcsMoniorData", (data) => {
        const dataObj = JSON.parse(data);
        HandleSingalRData(dataObj);
      });
      this.$signalR.onPush("PushModeStatus", (data) => {
        // console.log('bindSingalRData', data)
      });
    },
    // 运行
    operateRun(deviceName) {
      HandleDeviceOperate(this, deviceName, 3);
    },
    // 停止
    operateStop(deviceName) {
      HandleDeviceOperate(this, deviceName, 4);
    },
    // 解除异常
    operateRelieve(deviceName) {
      HandleDeviceOperate(this, deviceName, 8);
    },
    // 处理空取
    operateEmpty(deviceName) {
      HandleDeviceOperate(this, deviceName, 6);
    },
    // 处理二重
    operateDouble(deviceName) {
      HandleDeviceOperate(this, deviceName, 6);
    },
    // 详情
    async operateDetails(deviceName) {
      if (!this.particularsclick) {
        const res = await GetDeviceDataApi(deviceName);
        this.particularsData = JSON.parse(res.data.deviceInfo);
        this.particularsclick = true;
      } else {
        this.particularsclick = false;
      }
    },
    //禁用按钮
    disableClick() {
      console.log("禁用按钮");
    },
    // MES在线按钮
    async MESOnline() {
      // 查看当前离线在线
      const res = await QueryConfigValue();
      console.log(res.data.data);
      if (res.data.data === "0") {
        this.MESIsonline = false;
      } else if (res.data.data === "1") {
        this.MESIsonline = true;
      }
      // console.log(this.MESIsonline)
      if (this.MESIsonline) {
        await UpdateConfigValueApi({ configKey: "IsOnline", configValue: 0 });
        Message.success("修改成功");
      } else {
        await UpdateConfigValueApi({ configKey: "IsOnline", configValue: 1 });
        Message.success("修改成功");
      }
    },
    // 是否入库出库
    async isBoundClick() {
      alert("未完成需要修改");
      console.log(this.IOPortData, "IOPortData");
      // console.log({ configKey: this.IOPortData.name, configValue: 4 }, '{ configKey: this.IOPortName, configValue: 4 }')
      // if (this.IOPortData.mode) {
      //   const res = await UpdateConfigValueApi({ configKey: this.IOPortData.name, configValue: 4 })
      //   console.log(res)
      // } else {
      //   const res = await UpdateConfigValueApi({ configKey: this.IOPortData.name, configValue: 3 })
      //   console.log(res)
      // }
      // Message.success('操作成功')
    },
    //关闭dialog
    closeDialog() {
      this.disableClickShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
#svg {
  width: 100%;
  height: 100%;
  background-color: #100c38;
}
</style>

